<script setup>
import { computed } from "vue";
import { useAppStore } from "@/store/modules/app";
import ConfigGlobal from "@cps/common/ConfigGlobal";
import { useDesign } from "@/hooks/web/useDesign";

const { getPrefixCls } = useDesign();

const prefixCls = getPrefixCls("app");

const appStore = useAppStore();

const currentSize = computed(() => appStore.getCurrentSize);

const greyMode = computed(() => appStore.getGreyMode);

appStore.initTheme();
</script>

<template>
  <config-global :size="currentSize">
    <router-view
      :class="greyMode ? `${prefixCls}-grey-mode` : ''"
    ></router-view>
  </config-global>
</template>

<style lang="less">
@prefix-cls: ~"@{adminNamespace}-app";

.size {
  width: 100%;
  height: 100%;
}

html,
body {
  padding: 0 !important;
  margin: 0;
  overflow: hidden;
  .size;

  #app {
    .size;
  }
}

.@{prefix-cls}-grey-mode {
  filter: grayscale(100%);
}
</style>
